<template>
  <div style="margin-top: 16px">
    <el-form-item label="处理用户">
      <el-select filterable v-model="userTaskForm.assignee" @change="updateElementTask('assignee')" value-key="id">
        <el-option v-for="item in initData.userList" :key="'su-' + item.id" :label="`${item.name}`" :value="item.id">
          <span style="float: left">{{ item.name }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px;margin-right:12px">{{ item.deptName }}</span>
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="候选用户">
      <el-select filterable multiple :multiple-limit="8" v-model="userTaskForm.candidateUsers" @change="updateElementTask('candidateUsers')" value-key="id">
        <el-option v-for="item in initData.userList" :key="'mu-' + item.id" :label="`${item.name}`" :value="item.id">
          <span style="float: left">{{ item.name }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px;margin-right:12px">{{ item.deptName }}</span>
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="候选分组">
      <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" v-model="defaultTaskForm.candidateGroups" @focus="dialog" />
    </el-form-item>

    <el-form-item label="到期时间">
      <el-input v-model="userTaskForm.dueDate" clearable @change="updateElementTask('dueDate')" />
    </el-form-item>
    <el-form-item label="跟踪时间">
      <el-input v-model="userTaskForm.followUpDate" clearable @change="updateElementTask('followUpDate')" />
    </el-form-item>
    <el-form-item label="优先级">
      <el-input v-model="userTaskForm.priority" clearable @change="updateElementTask('priority')" />
    </el-form-item>

    <el-dialog title="提示" :visible="dialogVisible" width="100%" @opened="setTree">
      <el-row :gutter="20" type="flex">
        <el-col :span="12">
          <div class="tree">
            <el-tree show-checkbox default-expand-all node-key="reserved1" ref="tree" highlight-current :data="treeData.children" :props="treeProps"> </el-tree>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="role">
            <el-checkbox-group v-model="currole">
              <el-checkbox v-for="item in initData.roleList" :label="item.code" :key="item.code">{{ item.roleName }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UserTask",
  props: {
    id: String,
    type: String
  },

  data() {
    return {
      dialogVisible: false,
      currole: [],
      curtree: [],
      defaultTaskForm: {
        assignee: "",
        candidateUsers: [],
        candidateGroups: "",
        dueDate: "",
        followUpDate: "",
        priority: ""
      },
      userTaskForm: {},
      treeProps: {
        children: "children",
        label: "value"
      }
    };
  },

  watch: {
    id: {
      immediate: true,
      handler() {
        this.defaultTaskForm.candidateGroups = "";
        this.currole = [];
        this.curtree = [];
        this.bpmnElement = window.bpmnInstances.bpmnElement;
        this.$nextTick(() => this.resetTaskForm());
      }
    }
  },
  inject: ["initData", "treeData"],
  created() {
    console.group("这里是注入的数据");
    console.log("注入的 表单信息", this.initData);
    console.log("注入的 组织树信息", this.treeData);
    console.groupEnd("这里是注入的数据");
  },
  methods: {
    resetTaskForm() {
      for (let key in this.defaultTaskForm) {
        let value;
        //判断组别
        if (key === "candidateUsers" || key === "candidateGroups") {
          value = this.bpmnElement?.businessObject[key] ? this.bpmnElement.businessObject[key].split(",") : [];
          if (key === "candidateGroups" && value.length) {
            this.$set(this.defaultTaskForm, key, "");
            let temp = [];
            value.map(item => {
              this.initData.roleList.map(item2 => {
                if (item == item2.code) {
                  this.currole.push(item2.code);
                  temp.push(item2.roleName);
                }
              });
            });
            value.map(item => {
              this.initData.orgList.map(item2 => {
                if (item == item2.orgReservedCode) {
                  this.curtree.push(item2.orgReservedCode);
                  temp.push(item2.orgName);
                }
              });
            });
            this.$set(this.defaultTaskForm, key, temp.toString());
          }
        } else {
          value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
        }
        this.$set(this.userTaskForm, key, value);
      }
    },
    updateElementTask(key) {
      console.log("更新的数据是:", key);
      let taskAttr = Object.create(null);
      if (key === "candidateUsers" || key === "candidateGroups") {
        taskAttr[key] = this.userTaskForm[key] && this.userTaskForm[key].length ? this.userTaskForm[key].join() : null;
      } else {
        taskAttr[key] = this.userTaskForm[key] || null;
      }
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
    },
    dialog() {
      //控制弹框
      this.dialogVisible = true;
    },
    setTree() {
      console.log("我来设置key", this.curtree);
      this.$refs.tree.setCheckedKeys(this.curtree);
    },
    update() {
      //输出调试信息

      let trees = this.$refs.tree.getCheckedKeys();
      let values = this.currole.concat(trees);

      let fshow = [];
      this.currole.map(item => {
        //遍历角色
        this.initData.roleList.map(item2 => {
          if (item == item2.code) {
            fshow.push(item2.roleName);
          }
        });
      });
      trees.map(item => {
        //遍历机构
        this.initData.orgList.map(item2 => {
          if (item == item2.orgReservedCode) {
            fshow.push(item2.orgName);
          }
        });
      });
      console.log("调试数据", fshow);
      this.$set(this.defaultTaskForm, "candidateGroups", fshow.toString());
      this.$set(this.userTaskForm, "candidateGroups", values);
      this.dialogVisible = false;
      this.updateElementTask("candidateGroups");
    }
  },
  beforeDestroy() {
    this.bpmnElement = null;
  }
};
</script>
